<template>
    <el-container>

        <el-header class="header" height="100px">

            <el-row class="title">

                <h1>汇通停车场综合信息服务管理系统</h1>

            </el-row>
            <div class="header-user">
                <div class="user-img">
                    <el-avatar src="https://joeschmoe.io/api/v1/random"></el-avatar>
                </div>
                <div class="user-el-menu">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            adminyun<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>管理员-yyn</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>


        </el-header>

        <el-container class="left-caidan">

            <el-aside class="left-content" width="230px">
                <el-row class="caidan">
                    <el-col class="kuang" :span="24">
                        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen "
                            @close="handleClose" router @select="selectMenuItem">
                            <!-- <el-menu-item index="/main">
                                <i class="el-icon-menu"></i>
                                <span slot="title">首页</span>
                            </el-menu-item> -->


                            <el-submenu index="/main/wuliu">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>物流信息</span>
                                </template>
                                <el-menu-item-group index="/main/wuliu">

                                    <el-menu-item index="/main/wuliu">
                                        <i class="el-icon-s-cooperation"></i>
                                        运输需求
                                    </el-menu-item>
                                    <el-menu-item index="/main/driver">
                                        <i class="el-icon-s-custom"></i>
                                        司机需求
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-menu-item index="/main/carpay">
                                <i class="el-icon-menu"></i>
                                <span slot="title">车辆收费</span>
                            </el-menu-item>
                            <el-menu-item index="/main/shopgl">
                                <i class="el-icon-document"></i>
                                <span slot="title">商铺管理</span>
                            </el-menu-item>
                            <el-menu-item index="/main/usergl">
                                <i class="el-icon-user"></i>
                                <span slot="title">员工管理</span>
                            </el-menu-item>
                            <el-submenu index="/main/yiqing">
                                <template slot="title">
                                    <i class="el-icon-document-add"></i>
                                    <span>疫情防控</span>
                                </template>
                                <el-menu-item-group index="/main/yiqing">

                                    <el-menu-item index="/main/yghs">
                                        <i class="el-icon-mouse"></i>
                                        员工核酸
                                    </el-menu-item>
                                    <el-menu-item index="/main/sjhs">
                                        <i class="el-icon-coordinate"></i>
                                        司机核酸
                                    </el-menu-item>
                                    <el-menu-item index="/main/hwhs">
                                        <i class="el-icon-box"></i>
                                        货物核酸
                                    </el-menu-item>
                                   
                                </el-menu-item-group>
                            </el-submenu>
                            <el-menu-item index="/main/son" v-if="son"  >
                                <i class="el-icon-box"></i>
                                <span slot="title">子路由</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>

                </el-row>
            </el-aside>


            <el-main class="content">
                <router-view />

            </el-main>

        </el-container>
    </el-container>
</template>


<script>
export default {
    setup() {
        let sonluyou = ref(true)



        return {
            sonluyou
        }
    },


}


</script>



<style scoped>
.el-header {
    background-image: url("../assets/head.jpg");
    text-align: center;

    line-height: 600px;
    width: 100%
}

.el-aside {

    color: black;
    text-align: center;
    line-height: 200px;
    height: 662px;
}

.el-main {

    /*text-align: center;
    line-height: 160px;*/
    margin: 0;
    padding: 0;





}

/*标题文字样式 */
.title {
    bottom: 250px;
    right: 50px;
    color: #ddece2;
    font-size: 24px;
    letter-spacing: 8px;
}

.left-content {
    margin-top: 35px;

}

/**头部用户框 */
.header-user {

    width: 300px;

    line-height: 1.5;
    position: absolute;
    right: 65px;
    top: 4%;



}

.user-el-menu {
    text-align: center;
    align-items: center;
    line-height: 1.5;
    position: absolute;
    right: 1px;
    top: 1%;
    left: 165px;
    font-size: 15px;
    margin-top: 10px;
    height: 30px;
    color: black
}

.user-el-menu span {

    letter-spacing: 1px;
    font-size: 15px;
    color: rgb(172, 231, 235);
}

.el-menu-item-group {
    margin-left: 25px;
}

/**面包屑 */
.mianbao {
    margin-top: 38px;
}

/**表格框 */
.con-kuang {
    margin-top: 20px;
}
</style>
